<template>
  <div class="loginForm">
    <el-form :model="employee" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="employee.ename"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model="employee.password"></el-input>
      </el-form-item>
      <el-form-item label="验证码">
        <el-input v-model="employee.verifycode"></el-input>
        <img :src="verifycodesrc" @click="createVerifyCode"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
        <el-button type="primary" @click="toFindPassword">忘记密码</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      employee: {},
      verifycodesrc:'',
      uuid: '',
    };
  },
  mounted(){
    this.createVerifyCode();
  },
  methods: {
    toFindPassword(){
      this.$router.push("/findPassword");
    },
    createVerifyCode(){
      //this.verifycodesrc="http://localhost:8080/verifycode/create?t="+new Date();
      this.$axios.get("/verifycode/create?t="+new Date()).then(resp=>{
        if(resp.data.code==200){
          this.uuid=resp.data.data.uuid;
          this.verifycodesrc=resp.data.data.encode;
          //保持uuid
        }
      });
    },
    login() {
      // this.$axios.get("/employee/login",{params:{ename:this.employee.ename,password:this.employee.password}})
      this.$axios.get("/employee/login",{params:{ename:this.employee.ename,
                  password:this.employee.password,verifycode:this.employee.verifycode,uuid:this.uuid}})
      .then((resp) => {
        if (resp.data.code == 200) {
          //将响应头中的token存入localstorage
          // console.log("token=",resp.headers.token)
          // window.localStorage.setItem("token",resp.headers.token);
          this.$message(resp.data.msg);
          this.$router.push("/main");
        } else {
          this.$message(resp.data.data);
          this.createVerifyCode();
        }
      });
    },
  },
};
</script>

<style>
.loginForm {
  padding-top: 100px;
  width: 500px;
  margin: 0px auto;
}
</style>